<template>
<div id="first">
    <div class="div">
      <!-- <img src="@/assets/h.jpg" id="img" /> -->
    <el-tabs type="border-card" class="demo-tabs" :default-active="$route.path" router>

      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <Notebook />
            </el-icon>
            <span>账号登录</span>
          </span>
        </template>
        <Ac />
      </el-tab-pane>

      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <Iphone />
            </el-icon>
            <span>手机号登录</span>
          </span>
        </template>
        <Ph />
      </el-tab-pane>

      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <Postcard />
            </el-icon>
            <span>邮箱登录</span>
          </span>
        </template>
        <We />
      </el-tab-pane>

    </el-tabs>
  </div>
</div>


<RouterView/>

</template>

<script setup>

import Ac from '../components/UCenter/login/Ac.vue';
import Ph from '../components/UCenter/login/Ph.vue';
import We from '../components/UCenter/login/We.vue';


</script>



<style scoped>
:deep(.el-tabs__nav){
    white-space: nowrap;
    position: relative;
    transition: transform var(--el-transition-duration);
    float: left;
    z-index:0;
}

  #img{
    position: absolute;
    width: 1350px;
  }
.div{
  position: absolute;
  top: 18%;
  left:26%;
}
:deep(#register[data-v-d3072942]){
    max-width: 340px;
    margin-left: 40px auto;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-family: cursive;
    z-index: 0;
    border: 2px solid rgb(117, 66, 30);
    box-shadow: 0 18px 16px 0 rgb(157 42 42 / 20%), 0 16px 20px 0 rgb(133 85 215 / 19%);
}


:deep(.el-tabs) {
  --el-tabs-header-height: 50px;
  width: 500px;
  height: 450px;
  position: absolute;
  top: 27%;
  left: 18%;

}

:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item) {
  width: 166.8px;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 14px;
}
:deep(.el-tabs--border-card) {
    background: #f9feffb3;
    border-radius: 8px;
    border: 3px solid #7e3030;
    box-shadow: #7e3030 3px 3px 19px 0px;
}
</style>
